<template>
  <div class="root">
    <dv-full-screen-container class="content">
      <Tools />
      <Pane v-for="(item, index) in list" :key="index" :data="item" :style="[...item.style]" />
    </dv-full-screen-container>
    <SetIndex :visible="visible" :row="row" :hideCancel="hideCancel" :hideConfirm="hideConfirm" />
  </div>
</template>

<script>
import '@/api/ops/flexible.js'
import { SetIndex, Tools, Splitpanes } from './components'
import Screenfull from '@/components/Screenfull'
import { launchFullscreen } from '@/api/ops/dashboard'

export default {
  components: {
    Screenfull,
    SetIndex,
    Tools,
    Splitpanes
  },
  provide: function () {
    return {
      select: this.handlerClick
    }
  },
  computed: {
    list() {
      return this.treeData(this.dataSource)
    }
  },
  data() {
    return {
      visible: false,
      loading: true,
      dataSource: [
        { id: 1, parentId: 0, setting: { padding: '', creatType: 'split', direction: 'column', quantity: 2, }, style: { width: '100%', height: '10%', flexDirection: 'column', background: '#ddd', } },
        { id: 2, parentId: 0, style: { width: '100%', height: '90%', flexDirection: 'row', background: '#255', } },
        { id: 4, parentId: 2, style: { width: '20%', height: '100%', flexDirection: 'column', background: '#228', } },
        { id: 5, parentId: 2, style: { width: '60%', height: '100%', flexDirection: 'column', background: '#000', } },
        { id: 6, parentId: 2, style: { width: '20%', height: '100%', flexDirection: 'column', background: '#785', } },
        { id: 7, parentId: 4, style: { width: '100%', height: '30%', flexDirection: 'column', background: '#228', } },
        { id: 8, parentId: 4, style: { width: '100%', height: '40%', flexDirection: 'column', background: '#312', } },
        { id: 9, parentId: 4, style: { width: '100%', height: '30%', flexDirection: 'column', background: '#159', } },
        { id: 10, parentId: 5, style: { width: '100%', height: '70%', flexDirection: 'column', background: '#fff', } },
        { id: 11, parentId: 5, style: { width: '100%', height: '30%', flexDirection: 'column', background: '#785', } },
        { id: 12, parentId: 6, style: { width: '100%', height: '30%', flexDirection: 'column', background: '#255', } },
        { id: 13, parentId: 6, style: { width: '100%', height: '40%', flexDirection: 'column', background: '#000', } },
        { id: 14, parentId: 6, style: { width: '100%', height: '30%', flexDirection: 'column', background: '#505', } },
      ],
      row: {},
    }
  },
  mounted() {
    this.init()
  },
  beforeMount() {
    //stopF5Refresh()
    launchFullscreen()
    console.log(77777777, this.treeData(this.dataSource));
    // this.refreshToken()
  },
  methods: {
    init() {

    },
    treeData(source, id = 'id', parentId = 'parentId', children = 'children') {
      let cloneData = JSON.parse(JSON.stringify(source))
      return cloneData.filter(father => {
        let branchArr = cloneData.filter(child => father[id] == child[parentId]);
        branchArr.length > 0 ? father[children] = branchArr : ''
        return father[parentId] == 0        // 如果第一层不是parentId=0，请自行修改
      })
    },
    handlerClick(item) {
      // const { id, parentId, checked } = item;
      // item.checked = !checked;
      // const index = this.dataSource.findIndex(ele => ele.id === id);
      this.row = item;
      this.visible = true;
      console.log("Catalogue>>>>>>>>    ", item);
    },
    hideCancel() {
      this.visible = false;
    },
    hideConfirm(value) {
      const { id } = value;
      // item.checked = !checked;
      // const index = this.dataSource.findIndex(ele => ele.id === id);
      this.visible = false;
      this.dataSource.push({ id: 15, parentId: id, style: { width: '100%', height: '30%', flexDirection: 'column', background: '#328', } },);
      console.log(2222222, value);
    },
  }

}
</script>

<style lang="scss">
.root {
  .content {
    display: flex;
    flex-direction: column;
  }
}
</style>
